<template>
  <div>
    <!-- 激活码详情 -->
    <el-descriptions direction="vertical" :column="1" border>
      <el-descriptions-item label="设备名称">
        {{
          activationCodeForm.brandName +
          "_" +
          activationCodeForm.categoryName +
          "_" +
          activationCodeForm.typeName
        }}
      </el-descriptions-item>
      <el-descriptions-item label="授权码">
        <el-tag type="success" size="large" class="text-[0.8rem]">
          {{ activationCodeForm.authCode }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="激活码">
        <el-tag type="success" size="large" class="text-[0.8rem]">
          {{ activationCodeForm.activateCode }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="过期时间">
        {{ $initTime(activationCodeForm.expireAt * 1000, 2) }}
        <el-tag class="ml-[10px]" type="danger"
          >剩余时间：{{ count_down }}</el-tag
        >
      </el-descriptions-item>
    </el-descriptions>
    <div class="mt-[10px] flex justify-end">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";
import { time } from "echarts";
onMounted(() => {
  handleCodeClose(props.detailForm);
});

const emit = defineEmits(["handleCancel"]);
const props = defineProps({
  detailForm: {
    type: Object,
    default: () => {},
  },
});

const activationCodeForm = ref({}); // 激活码详情
const count_down = ref(""); // 倒计时--时分秒

let timer = ref(null);
const handleCodeClose = ($event) => {
  activationCodeForm.value = JSON.parse(sessionStorage.getItem($event.outCode));

  //   ------ 初始化一次剩余时间
  const date = new Date();
  date.setMilliseconds(0);
  const timestamp = date.getTime() / 1000;

  const timeDiff = activationCodeForm.value.expireAt - timestamp;
  const hours = Math.floor(timeDiff / 3600);
  const minutes = Math.floor((timeDiff % 3600) / 60);
  const seconds = timeDiff % 60;
  //   ------

  // 剩余时间
  count_down.value = `${hours <= 0 ? "" : " 小时"}${
    minutes <= 0 ? "" : minutes + " 分钟 "
  }${seconds <= 0 ? "" : seconds + " 秒"}`;

  timer.value = setInterval(() => {
    const date = new Date();
    date.setMilliseconds(0);
    const timestamp = date.getTime() / 1000;

    const timeDiff = activationCodeForm.value.expireAt - timestamp;
    const hours = Math.floor(timeDiff / 3600);
    const minutes = Math.floor((timeDiff % 3600) / 60);
    const seconds = timeDiff % 60;

    // 剩余时间
    count_down.value = `${hours <= 0 ? "" : " 小时"}${
      minutes <= 0 ? "" : minutes + " 分钟 "
    }${seconds <= 0 ? "" : seconds + " 秒"}`;

    if (activationCodeForm.value.expireAt <= timestamp) {
      // 激活码已过期,请重新获取
      ElMessage.warning("激活码已过期,请重新获取");
      sessionStorage.removeItem($event.outCode);
      clearInterval(timer.value);
      timer.value = null;
      handleClose();
      return;
    }

    // console.log(activationCodeForm.value.expireAt, timestamp);
  }, 1000);
};

const handleClose = () => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  emit("handleCancel");
};

onBeforeUnmount(() => {
  if (timer.value) {
    clearTimeout(timer.value);
    timer.value = null;
  }
});
</script>

<style scoped lang="scss">
</style>